import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import moment from "moment";
import { Row, Col, Upload, Spin, Card, Form, Button, Divider } from "antd";
import DescriptionList from '../../../components/DescriptionList';
import styles from '../../Pbulic.less';
import 'react-quill/dist/quill.snow.css';

const FormItem = Form.Item;
const { Description } = DescriptionList;

@connect(({ notice, global }) => ({
  baseUrl:global.baseUrl,
  dictionaries:global.dictionaries,
  detaildata:notice.detaildata,
  loading:notice.loading.detailinfo,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    const { dispatch} = this.props;
    dispatch({
      type: "notice/fetch_notice_info",
      payload: {
        noticeId: this.detailId
      }
    })
  }


  render() {
    const { detaildata, loading, dictionaries, noticeType, baseUrl  } = this.props;


    const noticeClass = dictionaries.noticeClass && dictionaries.noticeClass.length > 0
      ? dictionaries.noticeClass.map(item=>item.label)
      :[];

    console.log(noticeClass)


    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata &&
          <Fragment>
          <Card bodyStyle={{padding:0}}>
            <Card
              type="inner"
              title={detaildata.noticeTitle}
              bordered={false}
              className={styles.info_inner_card}
              headStyle={{padding:'10px 20px 5px 20px',border:'none'}}
              bodyStyle={{padding:'0 20px 20px 20px'}}
            >
              <DescriptionList size="large" style={{ marginTop: 10 }}>
                <Description term={`${noticeType=="1" ? '公告' : '通知'}类型`}>{detaildata.noticeClass && noticeClass[parseInt(detaildata.noticeClass)-1]}</Description>
                <Description term="创建人">{detaildata.creator}</Description>
                <Description term="发布时间">{detaildata.createTime && moment(detaildata.createTime).format("YYYY-MM-DD HH:mm")}</Description>
              </DescriptionList>

              <Divider style={{ marginBottom: 32 }} />


              <div className="ql-editor" dangerouslySetInnerHTML={{ __html: detaildata.noticeCon }} ></div>


              <DescriptionList size="large" col={1} style={{ marginTop: 10 }}>
                <Description className={"upload_can_not_del"}>{
                  detaildata.noticeFilePath && detaildata.noticeFilePath.length>0 &&
                  <Upload
                    disabled={true}
                    defaultFileList={detaildata.noticeFilePath.map(item=>{
                      item.url = baseUrl + item.url;
                      return item;
                    })}
                  />
                }</Description>
              </DescriptionList>

            </Card>

          </Card>
          </Fragment>
        }
      </Fragment>
    );
  }
}
